<template>
  <div id="myyhq">
    <div class="yhq_box">
      <!-- 头部订单状态选项卡 -->
      <div class="top_option">
        <span
          v-for="(item,index) in order_option"
          :key="index"
          :class="currentIndex === index ? 'bgcolor' : '' "
          @click="tab_option(index)"
        >{{item}}</span>
      </div>

      <!-- 未使用模块 -->
      <div class="no_use" v-show="currentIndex === 0">
        <ul>
          <li v-for="(item,index) in no_useList" :key="index">
            <div class="left">
              <span>{{item.yhq_price}}</span>
              <span>￥</span>
            </div>
            <img src="../../assets/image/4_1_0_line.png" alt />
            <div class="right">
              <div class="float_left">
                <span>{{item.yhq_type}}</span>
                <span>{{item.yhq_use}}</span>
                <span>{{item.yhq_date}}</span>
              </div>
              <div class="float_right">
                <span @click="todetail()">查看详情>></span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 已使用模块 -->
      <div class="used" v-show="currentIndex === 1">
        <ul>
          <li v-for="(item,index) in used_list" :key="index">
            <div class="left">
              <span>{{item.yhq_price}}</span>
              <span>￥</span>
            </div>
            <img src="../../assets/image/4_1_0_line.png" alt />
            <div class="right">
              <div class="float_left">
                <span>{{item.yhq_type}}</span>
                <span>{{item.yhq_use}}</span>
                <span>{{item.yhq_date}}</span>
              </div>
              <div class="float_right">
                <img src="../../assets/image/7_4_2_yishiyong.png" alt />
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 已过期模块 -->
      <div class="out_date" v-show="currentIndex === 2">
        <ul>
          <li v-for="(item,index) in out_dateList" :key="index">
            <div class="left">
              <span>{{item.yhq_price}}</span>
              <span>￥</span>
            </div>
            <img src="../../assets/image/4_1_0_line.png" alt />
            <div class="right">
              <div class="float_left">
                <span>{{item.yhq_type}}</span>
                <span>{{item.yhq_use}}</span>
                <span>{{item.yhq_date}}</span>
              </div>
              <div class="float_right">
                <img src="../../assets/image/7_4_3_yiguoqi.png" alt />
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      order_option: ["未使用", "已使用", "已过期"], //优惠券三种状态
      currentIndex: 0, //头部状态选项卡默认下标
      no_useList: [
        {
          yhq_price: 200,
          yhq_type: "平台满减券10元",
          yhq_use: "满300可用",
          yhq_date: "2019-06-30 至 2019-08-31"
        },
        {
          yhq_price: 200,
          yhq_type: "平台满减券10元",
          yhq_use: "满300可用",
          yhq_date: "2019-06-30 至 2019-08-31"
        },
        {
          yhq_price: 200,
          yhq_type: "平台满减券10元",
          yhq_use: "满300可用",
          yhq_date: "2019-06-30 至 2019-08-31"
        }
      ], //未使用优惠券
      used_list: [
        {
          yhq_price: 200,
          yhq_type: "平台满减券10元",
          yhq_use: "满300可用",
          yhq_date: "2019-06-30 至 2019-08-31"
        },
        {
          yhq_price: 200,
          yhq_type: "平台满减券10元",
          yhq_use: "满300可用",
          yhq_date: "2019-06-30 至 2019-08-31"
        },
        {
          yhq_price: 200,
          yhq_type: "平台满减券10元",
          yhq_use: "满300可用",
          yhq_date: "2019-06-30 至 2019-08-31"
        }
      ], //已使用优惠券
      out_dateList: [
        {
          yhq_price: 200,
          yhq_type: "平台满减券10元",
          yhq_use: "满300可用",
          yhq_date: "2019-06-30 至 2019-08-31"
        },
        {
          yhq_price: 200,
          yhq_type: "平台满减券10元",
          yhq_use: "满300可用",
          yhq_date: "2019-06-30 至 2019-08-31"
        },
        {
          yhq_price: 200,
          yhq_type: "平台满减券10元",
          yhq_use: "满300可用",
          yhq_date: "2019-06-30 至 2019-08-31"
        }
      ] //已过期优惠券
    };
  },
  methods: {
    tab_option(i) {
      this.currentIndex = i;
    },
    todetail(){
       this.$router.push({ path: "/personalCenter/yhq_detail" });
    }
  }
};
</script>

<style  lang="scss" scoped>
.yhq_box {
  width: 940px;
  height: 800px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 3px 5px 0px rgba(204, 196, 196, 0.15);
  padding: 20px;
  box-sizing: border-box;
  .top_option {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(230, 230, 230, 1);
    & span:nth-of-type(1) {
      margin-left: 60px;
    }
    span {
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      margin-right: 160px;
      padding: 10px;
      border-bottom: 2px solid #fff;
    }
  }
  // 优惠券未使用
  .no_use {
    ul {
      list-style: none;
      margin-left: 20px;
      padding: 0;
      margin-top: 30px;
      li {
        width: 400px;
        height: 100px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 1px 3px 0px rgba(88, 37, 44, 0.2);
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        .left {
          width: 100px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          & :nth-of-type(1) {
            font-size: 30px;
            font-family: Microsoft YaHei;
            font-weight: 500;
            color: rgba(254, 44, 74, 1);
          }
          & :nth-of-type(2) {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: rgba(254, 44, 74, 1);
            position: absolute;
            top: 4px;
            right: 12px;
          }
        }
        .right {
          display: flex;
          justify-content: space-between;
          .float_left {
            margin-left: 20px;
            span {
              display: block;
              font-size: 7px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: rgba(128, 128, 128, 1);
              margin-bottom: 4px;
            }
            & span:nth-of-type(1) {
              font-size: 12px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: rgba(51, 51, 51, 1);
              margin-bottom: 18px;
            }
          }
          .float_right {
            display: flex;
            align-items: center;
            padding-left: 50px;
            box-sizing: border-box;
            font-size: 10px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(254, 44, 74, 1);
            cursor: pointer;
          }
        }
      }
    }
  }
  //优惠券已使用
  .used {
    ul {
      list-style: none;
      margin-left: 20px;
      padding: 0;
      margin-top: 30px;
      li {
        width: 400px;
        height: 100px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 1px 3px 0px rgba(88, 37, 44, 0.2);
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        .left {
          width: 100px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          & :nth-of-type(1) {
            font-size: 30px;
            font-family: Microsoft YaHei;
            font-weight: 500;
            color: rgba(254, 44, 74, 1);
          }
          & :nth-of-type(2) {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: rgba(254, 44, 74, 1);
            position: absolute;
            top: 4px;
            right: 12px;
          }
        }
        .right {
          display: flex;
          justify-content: space-between;
          .float_left {
            margin-left: 20px;
            span {
              display: block;
              font-size: 7px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: rgba(128, 128, 128, 1);
              margin-bottom: 4px;
            }
            & span:nth-of-type(1) {
              font-size: 12px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: rgba(51, 51, 51, 1);
              margin-bottom: 18px;
            }
          }
          .float_right {
            display: flex;
            align-items: center;
            padding-left: 60px;
            box-sizing: border-box;
            justify-content: center;
          }
        }
      }
    }
  }
  //优惠券已过期
  .out_date {
    ul {
      list-style: none;
      margin-left: 20px;
      padding: 0;
      margin-top: 30px;
      li {
        width: 400px;
        height: 100px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 1px 3px 0px rgba(88, 37, 44, 0.2);
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        .left {
          width: 100px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          & :nth-of-type(1) {
            font-size: 30px;
            font-family: Microsoft YaHei;
            font-weight: 500;
            color: rgba(254, 44, 74, 1);
          }
          & :nth-of-type(2) {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: rgba(254, 44, 74, 1);
            position: absolute;
            top: 4px;
            right: 12px;
          }
        }
        .right {
          display: flex;
          justify-content: space-between;
          .float_left {
            margin-left: 20px;
            span {
              display: block;
              font-size: 7px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: rgba(128, 128, 128, 1);
              margin-bottom: 4px;
            }
            & span:nth-of-type(1) {
              font-size: 12px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: rgba(51, 51, 51, 1);
              margin-bottom: 18px;
            }
          }
          .float_right {
            display: flex;
            align-items: center;
            padding-left: 60px;
            box-sizing: border-box;
            justify-content: center;
          }
        }
      }
    }
  }
}
// 头部订单状态栏切换时下方横线
.bgcolor {
  border-bottom: 2px solid rgba(240, 58, 88, 1) !important;
  color: rgba(240, 58, 88, 1) !important;
}
</style>
